'use client';
import {Button} from '@/components/ui/button';
import React, {useState} from 'react';

const Page = () => {
    // 学生名
    const [name, setName] = useState()
    // 学号
    const [studentNumber, setStudentNumber] = useState()
    // 学生班级
    const [stuClass, setStuClass] = useState()
    // 入学年份
    const [enrollmentYear, setEnrollmentYear] = useState()

    const submit = async (e) => {
        e.preventDefault()
        console.log(name, studentNumber, stuClass, enrollmentYear)

        const res = await fetch('http://localhost:3000/api/student/add', {
            method: "POST",
            body: JSON.stringify({
                name, class: stuClass, enrollmentYear, studentNumber
            }),
            headers: {
                "Content-Type": 'application/json'
            }
        })

        const json = await res.json()
        if (!json.student) return alert(json)
        return alert('录入成功')
    }

    return (
        <div>
            <form
                className={'gap-4 flex flex-col justify-center items-center mt-8'}
                onSubmit={submit}>
                <label className={'text-2xl'} htmlFor="studentNumber">学号</label>
                <input
                    className={'border border-black p-2 rounded-lg'}
                    name={'studentNumber'} type="text" value={studentNumber}
                    onChange={(e) => setStudentNumber(e.target.value)}/>

                <label className={'text-2xl'} htmlFor="name">学生姓名</label>
                <input
                    className={'border border-black p-2 rounded-lg'}
                    name={'name'} type="text" value={name}
                    onChange={(e) => setName(e.target.value)}/>

                <label className={'text-2xl'} htmlFor="stuClass">学生班级</label>
                <input
                    className={'border border-black p-2 rounded-lg'}
                    name={'stuClass'} type="text" value={stuClass}
                    onChange={(e) => setStuClass(e.target.value)}/>

                <label className={'text-2xl'} htmlFor="enrollmentYear">入学年份</label>
                <input
                    className={'border border-black p-2 rounded-lg'}
                    name={'enrollmentYear'} type="date" value={enrollmentYear}
                    onChange={(e) => setEnrollmentYear(e.target.value)}/>

                <Button>提交</Button>
            </form>
        </div>
    );
};

export default Page;